<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{currentcity}}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" v-for="item in hot" :key="item.code">
                        <div class="button">{{item.cityName}}</div>
                    </div>
                </div>
            </div> -->
            <div class="area" 
                v-for="(item) in list" 
                :ref="item.initial"
                :key="item.initial">
                <div class="title border-topbottom">{{item.initial}}</div>
                <ul class="item-list">
                    <li class="item border-bottom" @click="chooseCity(listInner)" v-for="(listInner,index) in item.list" :key="index">{{listInner.name}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    props: {
          hot: Array,
          list: Array,
          letter:String
      },
    data(){
        return {
            currentcity: ''
        }
    },
    methods:{
        chooseCity(data){
           this.currentcity = this.$store.state.locate = data.name;
           this.$router.back();
        }
    },
    mounted () {
        this.scroll = new BScroll(this.$refs.wrapper,{click: true, tap: true});
        this.currentcity = this.$store.state.locate || '苏州';
    },
    watch:{
        letter () {  //监听列表滚动事件 A-Z
            if(this.letter) {
                const element = this.$refs[this.letter][0]
                this.scroll.scrollToElement(element)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.border-topbottom{
    &:before{
        background: #ccc;
    }
    &:after{
        background:#ccc;
    }     
}
    
.border-bottom{
    &:before{
        background: #ccc;
    }    
}
    
.list{
    overflow: hidden;
    position:absolute;
    top:1.58rem;
    left:0;
    right:0;
    bottom:0;
    .title{
        line-height: 1rem;
        background: #eee;
        padding-left: .4rem;
        color: #666;
        font-size: 1.2em;
    }
    .button-list{
        overflow:hidden;
        padding: .15rem .9rem .15rem .15rem;
        .button-wrapper{
            float:left;
            width:33.33%;
            .button{
                margin: .15rem;
                padding: .15rem 0;
                text-align: center;
                border: .03rem solid #ccc;
                border-radius: .1rem;
            }
        }    
    }
    .item-list{
        list-style: none;
        .item{
            line-height: 1rem;
            color:#212121;
            padding-left: .2rem;
            font-size: 1.1em;
            text-overflow: ellipsis;
            white-space: nowrap;
        } 
    }     
}
    
</style>